import {
  ModalForm,
  ProFormInstance,
  ProFormText,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Button, Space, Upload, message } from 'antd';
import React, { useRef } from 'react';
import { useRequest } from 'umi';
import {
  DownloadOutlined,
  UploadOutlined,
  FileSearchOutlined,
  InboxOutlined,
} from '@ant-design/icons';
const { Dragger } = Upload;

import { TemplateUrlAdapter } from './Adapter';

export default (props: any) => {
  const url = props.url
  const MyExtra = [];
  const formRef = useRef<ProFormInstance>();
  const findInfoByDataForm = useRequest((data = {}) => {
    return {
      url: props.url,
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  const uploadExcel = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9998/import/importData`, //?file=${data}&${data?.tableName}
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        body: data, //流式传输
      };
    },
    {
      manual: true,
    },
  );
  return (
    <Space>
      <ModalForm
        title="可批量导入表格文件"
        trigger={
          <Button type="primary">
            <UploadOutlined />
            导入文件
          </Button>
        }
        formRef={formRef}
        autoFocusFirstInput
        submitTimeout={2000}
        onFinish={async (values) => {
          console.log(values);
          var formData = new FormData();
          formData.append('file', values.file[0].originFileObj);
          formData.append('tableName', props?.tableName);
          uploadExcel.run(formData).then((e) => {
            message.success('上传成功，刷新后查看数据!');
            findInfoByDataForm.run(props?.params);
          });
          return true;
        }}
        key="1"
      >
        <ProFormUploadDragger
          // label="可上传多个文件"
          name="file"
          action='http://10.1.40.84:9998/import/importData'
          fieldProps={{
            //限制条件
            // ...Upload,
            // maxCount: 1, // 数量
            accept: '.xlsx',
          }}
        />
        <ProFormText name={'tableName'} hidden />
      </ModalForm>
      <Button
        type="primary"
        key="2"
        onClick={() => window.open(TemplateUrlAdapter(props?.tableName))}
      >
        <DownloadOutlined />
        下载模板
      </Button>
    </Space>
  );
};
